<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Score Board</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            width: 1400px;
            height: 1000px;
            background: url("img/index.png");
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table,
        th,
        td {
            border: 3px solid black;
        }

        th,
        td {
            padding: 30px;
            text-align: center;
            font-size: 30px;
        }

        h1 {
            text-align: center;
        }

        .button {
            margin-left: 670px;
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        .button1 {
           margin-left: -100px;
            background-color: grey;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="button1" onclick="back()">返回主菜单</div>
        <div class="button" onclick="frashScore()">重置分数</div>
        <h1>Score Board</h1>
        <table id="data-table">
            <tr>
                <th>Level</th>
                <th>Top Score</th>
                <th>Second</th>
                <th>Third</th>
            </tr>
            <!-- Data rows will be inserted here using JavaScript -->
        </table>
        
    </div>

</body>
<script>
    const data = [
        { level: 'Level Ⅰ', topScore: 0, second: 0, third: 0 },
        { level: 'Level Ⅱ', topScore: 0, second: 0, third: 0 },
        { level: 'Level Ⅲ', topScore: 0, second: 0, third: 0 },
        { level: 'Level Ⅳ', topScore: 0, second: 0, third: 0 },
        { level: 'Level Ⅴ', topScore: 0, second: 0, third: 0 },
        { level: 'Survical', topScore: 0, second: 0, third: 0 },
        // Add more data entries as needed
    ];
    data[0].topScore = localStorage.getItem('grade1Max');
    data[0].second = localStorage.getItem('grade1Second');
    data[0].third = localStorage.getItem('grade1Three');

    data[1].topScore = localStorage.getItem('grade2Max');
    data[1].second = localStorage.getItem('grade2Second');
    data[1].third = localStorage.getItem('grade2Three');

    data[2].topScore = localStorage.getItem('grade3Max');
    data[2].second = localStorage.getItem('grade3Second');
    data[2].third = localStorage.getItem('grade3Three');

    data[3].topScore = localStorage.getItem('grade4Max');
    data[3].second = localStorage.getItem('grade4Second');
    data[3].third = localStorage.getItem('grade4Three');

    data[4].topScore = localStorage.getItem('grade5Max');
    data[4].second = localStorage.getItem('grade5Second');
    data[4].third = localStorage.getItem('grade5Three');

    data[5].topScore = localStorage.getItem('grade6Max');
    data[5].second = localStorage.getItem('grade6Second');
    data[5].third = localStorage.getItem('grade6Three');

    const dataTable = document.getElementById('data-table');

    // Function to update the table with new data
    // function updateTable() {
    //     // Clear existing rows from the table
    //     while (dataTable.rows.length > 1) {
    //         dataTable.deleteRow(1);
    //     }

    //     // Populate the table with updated data
    data.forEach(entry => {
        const row = dataTable.insertRow();
        const levelCell = row.insertCell(0);
        const topScoreCell = row.insertCell(1);
        const secondCell = row.insertCell(2);
        const thirdCell = row.insertCell(3);

        levelCell.textContent = entry.level;
        topScoreCell.textContent = entry.topScore;
        secondCell.textContent = entry.second;
        thirdCell.textContent = entry.third;
    });

    function frashScore() {
        localStorage.setItem('grade1Max', 0);
        localStorage.setItem('grade1Second', 0);
        localStorage.setItem('grade1Three', 0);

        localStorage.setItem('grade2Max', 0);
        localStorage.setItem('grade2Second', 0);
        localStorage.setItem('grade2Three', 0);

        localStorage.setItem('grade3Max', 0);
        localStorage.setItem('grade3Second', 0);
        localStorage.setItem('grade3Three', 0);

        localStorage.setItem('grade4Max', 0);
        localStorage.setItem('grade4Second', 0);
        localStorage.setItem('grade4Three', 0);

        localStorage.setItem('grade5Max', 0);
        localStorage.setItem('grade5Second', 0);
        localStorage.setItem('grade5Three', 0);

        localStorage.setItem('grade6Max', 0);
        localStorage.setItem('grade6Second', 0);
        localStorage.setItem('grade6Three', 0);

    }
    function back(){
        window.location.href = "index.html";
    }

</script>

</html>